<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
      background: radial-gradient(ellipse at bottom, #1a2633, #0b0d13);
      overflow: hidden;
    }

    .sky {
      width: 100%;
      height: 100%;
      /* 进行透视，让 z 轴出现 */
      perspective: 5000px;
      /* 让子级拥有自己的 3D 坐标轴 */
      transform-style: preserve-3d;
      
      
    }

    /* stars 总盒子，后面要带着所有的星星一起旋转 */
    .stars {
      position: relative;
      width: 100%;
      height: 100%;
      /* 整体进行旋转 */
      animation: rotate 60s linear infinite;
      /* 让子级拥有自己的 3D 坐标轴 */
      transform-style: preserve-3d;
      /* 设置变换的原点 */
      transform-origin: 50% 50% -500px;
    }

    /* 设置每个星星的样式 */
    .star {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 6px;
      height: 6px;
      margin-left: -3px;
      margin-top: -3px;
      /* 不能固定死生成的位置 */
      transform-style: preserve-3d;
    }

    .counter {
      /* 让它自己逆着旋转，星星就可以保持永远正面朝观众 */
      animation: rotate 60s linear infinite reverse;
      transform-style: preserve-3d;
    }

    .slide {
      width: 6px;
      height: 6px;
      background-color: #ff0;
      border-radius: 50%;
      /* 让星星透明度变化，位置向上移动 */
      animation: fade 5s linear infinite;
    }

    .light {
      position: absolute;
      left: -47px;
      width: 100px;
      height: 6px;
      background: linear-gradient(to right,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 0.1),
          rgba(255, 255, 255, 0.5),
          rgba(255, 255, 255, 0.1),
          rgba(255, 255, 255, 0));
    }

    .light:nth-child(1) {
      transform: rotate(90deg);
    }

    .light:nth-child(2) {
      transform: rotate(150deg);
    }

    .light:nth-child(3) {
      transform: rotate(210deg);
    }

    /* 定义星星向上运动，透明度变化 */
    @keyframes fade {
      0% {
        opacity: 0;
        transform: translateY(0);
      }

      10% {
        opacity: 1;
      }

      40% {
        opacity: 1;
      }

      50% {
        opacity: 0;
        transform: translateY(-100px);
      }

      100% {
        opacity: 0;
        transform: translateY(-100px);
      }
    }

    /* 整体星星进行360度旋转 */
    @keyframes rotate {
      0% {
        transform: rotateY(0deg);
      }

      100% {
        transform: rotateY(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="sky">
    <div class="stars">
      
    </div>
  </div>

  <script src="js/jquery-1.11.1.min.js"></script>
  <script>
    // 定义一下需要的星星的数量
    var len = 500;
    // 通过循环进行添加
    for (var i = 0; i < 500; i++) {
      // 在内存中创建一个星星
      var $star = $(`<div class="star">
        <div class="counter">
          <div class="slide">
            <div class="light"></div>
            <div class="light"></div>
            <div class="light"></div>
          </div>
        </div>
      </div>`);
      // 动态的添加每个星星的位置变化
      // 随机产生一些位置
      // Math.random() 每次出现都是随机的得到一个 [0,1) 的随机小数
      var x = Math.random() * 1200 - 600 + 'px',
        y = Math.random() * 600 - 300 + 'px',
        z = Math.random() * 1000 - 1000 + 'px'
      $star.css({
        'transform': 'translate3d(' + x + ',' + y + ',' + z + ')'
      })
      // 设置 slide 不同的延时时间
      $star.find('.slide').css({
        
        'animation-delay': -50 * Math.random() + "s"
      })
      // 把生成的星星添加到HTML结构中
      $('.stars').append($star);
    }
  </script>
</body>

</html>